<template>
  <view class="container">
    <view class="tips-card">
      <text class="tip">1、本设备模拟量输入仅接受标准4-20mA电流信号
2、模拟量单位:长按首页模拟量单位处可修改模拟量单位
3、模拟量最大值、最小值配置仅接受数字和小数点，可以接
受的输入范围是-1000到1000，比如:-100.05;设定成功后，会
显示在对应栏目的标题下面，比如显示11.00/5.00/2，意义为
最大值为11.00，最小值为5.00，小数位是2位
4、校准使能开启后，可以操作对应的校准点按钮。比如，要
校准第一路模拟量输入4mA测量点，将4mA标准电流信号接
入第-路模拟量端子，等待5秒钟，启用校准使能，然后按下
4mA按钮，校准完成后，校准参数栏目会显示校准结果的数
值。
5、校准参数显示意义，比如:400/1200/2000，则表示4mA
校准点对应的数值为400,12mA对应的数值为1200,20mA输入
对应的采样值为2000，其中400、1200、2000数字本身仅指
示作用。</text> 
    </view>

    <view class="ai-card">
      <view class="card-header">
        <text class="card-title">模拟量-AI1 历史数据曲线</text>
        <view class="summary" @click="goHistory('ai1')">
          <text class="summary-text">{{ ai1.maxValue.toFixed(2) }}/{{ ai1.minValue.toFixed(2) }}/{{ ai1.decimalIndex }}</text>
          <u-icon name="arrow-right" size="16" color="#60a4f7" />
        </view>
      </view>

      <view class="row">
        <view class="row-left">
          <u-icon name="arrow-up" size="18" color="#1e1f23" />
          <text class="row-title">设置最大值</text>
        </view>
        <view class="row-right">
          <text class="row-value">{{ ai1.maxValue.toFixed(2) }}</text>
          <view class="row-edit" @click="openEdit('ai1','maxValue')">
            <u-icon name="edit-pen" size="20" color="#60a4f7" />
          </view>
        </view>
      </view>

      <view class="row">
        <view class="row-left">
          <u-icon name="arrow-down" size="18" color="#1e1f23" />
          <text class="row-title">设置最小值</text>
        </view>
        <view class="row-right">
          <text class="row-value">{{ ai1.minValue.toFixed(2) }}</text>
          <view class="row-edit" @click="openEdit('ai1','minValue')">
            <u-icon name="edit-pen" size="20" color="#60a4f7" />
          </view>
        </view>
      </view>

      <view class="row">
        <view class="row-left">
          <u-icon name="edit-pen" size="18" color="#1e1f23" />
          <text class="row-title">设置小数位</text>
        </view>
        <view class="row-right">
          <text class="row-value">{{ decimalText(ai1.decimalIndex) }}</text>
        </view>
      </view>

      <view class="section">
        <u-subsection :list="decimalOptions" :current="ai1.decimalIndex" @change="changeDecimal('ai1', $event)" />
      </view>

      <view class="row">
        <view class="row-left">
          <text class="row-title">校准功能使用：{{ ai1.calibrateEnabled ? '启用' : '禁用' }}</text>
        </view>
        <u-switch v-model="ai1.calibrateEnabled" activeColor="#60a4f7" />
      </view>

      <view class="params">
        <text class="param-title">校准参数</text>
        <text class="param-value">{{ ai1.calibrateParams.join('/') }}</text>
      </view>

      <view class="btns">
        <u-button size="small" @click="doCalibrate('ai1',4)">4mA校准</u-button>
        <u-button size="small" @click="doCalibrate('ai1',12)">12mA校准</u-button>
        <u-button size="small" @click="doCalibrate('ai1',20)">20mA校准</u-button>
      </view>
    </view>

    <view class="ai-card">
      <view class="card-header">
        <text class="card-title">模拟量-AI2 历史数据曲线</text>
        <view class="summary" @click="goHistory('ai2')">
          <text class="summary-text">{{ ai2.maxValue.toFixed(2) }}/{{ ai2.minValue.toFixed(2) }}/{{ ai2.decimalIndex }}</text>
          <u-icon name="arrow-right" size="16" color="#60a4f7" />
        </view>
      </view>

      <view class="row">
        <view class="row-left">
          <u-icon name="arrow-up" size="18" color="#1e1f23" />
          <text class="row-title">设置最大值</text>
        </view>
        <view class="row-right">
          <text class="row-value">{{ ai2.maxValue.toFixed(2) }}</text>
          <view class="row-edit" @click="openEdit('ai2','maxValue')">
            <u-icon name="edit-pen" size="20" color="#60a4f7" />
          </view>
        </view>
      </view>

      <view class="row">
        <view class="row-left">
          <u-icon name="arrow-down" size="18" color="#1e1f23" />
          <text class="row-title">设置最小值</text>
        </view>
        <view class="row-right">
          <text class="row-value">{{ ai2.minValue.toFixed(2) }}</text>
          <view class="row-edit" @click="openEdit('ai2','minValue')">
            <u-icon name="edit-pen" size="20" color="#60a4f7" />
          </view>
        </view>
      </view>

      <view class="row">
        <view class="row-left">
          <u-icon name="edit-pen" size="18" color="#1e1f23" />
          <text class="row-title">设置小数位</text>
        </view>
        <view class="row-right">
          <text class="row-value">{{ decimalText(ai2.decimalIndex) }}</text>
        </view>
      </view>

      <view class="section">
        <u-subsection :list="decimalOptions" :current="ai2.decimalIndex" @change="changeDecimal('ai2', $event)" />
      </view>

      <view class="row">
        <view class="row-left">
          <text class="row-title">校准功能使用：{{ ai2.calibrateEnabled ? '启用' : '禁用' }}</text>
        </view>
        <u-switch v-model="ai2.calibrateEnabled" activeColor="#60a4f7" />
      </view>

      <view class="params">
        <text class="param-title">校准参数</text>
        <text class="param-value">{{ ai2.calibrateParams.join('/') }}</text>
      </view>

      <view class="btns">
        <u-button size="small" @click="doCalibrate('ai2',4)">4mA校准</u-button>
        <u-button size="small" @click="doCalibrate('ai2',12)">12mA校准</u-button>
        <u-button size="small" @click="doCalibrate('ai2',20)">20mA校准</u-button>
      </view>
    </view>

    <u-popup :show="popup.show" mode="center" @close="cancelEdit">
      <view class="popup">
        <text class="popup-title">请输入数值</text>
        <u-input v-model="popup.value" type="number" placeholder="例如 20.00" />
        <view class="popup-actions">
          <u-button size="small" type="default" @click="cancelEdit">取消</u-button>
          <u-button size="small" type="primary" @click="confirmEdit">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      decimalOptions: [{ name: '无小数位' }, { name: '一位' }, { name: '两位' }],
      popup: { show: false, ai: '', field: '', value: '' },
      ai1: { maxValue: 20.0, minValue: 4.0, decimalIndex: 2, calibrateEnabled: true, calibrateParams: [395, 1190, 1986] },
      ai2: { maxValue: 20.0, minValue: 4.0, decimalIndex: 2, calibrateEnabled: true, calibrateParams: [395, 1190, 1986] },
    };
  },
  methods: {
    decimalText(idx) {
      return idx === 0 ? '无小数位' : idx === 1 ? '一位' : '两位';
    },
    openEdit(ai, field) {
      this.popup = { show: true, ai, field, value: String(this[ai][field]) };
    },
    confirmEdit() {
      const v = Number(this.popup.value);
      if (!isNaN(v)) this[this.popup.ai][this.popup.field] = v;
      this.popup.show = false;
    },
    cancelEdit() {
      this.popup.show = false;
    },
    changeDecimal(ai, idx) {
      this[ai].decimalIndex = idx;
    },
    goHistory(ai) {
      uni.navigateTo({ url: '/pages/index/historyChart/index' });
    },
    doCalibrate(ai, level) {
      uni.showToast({ title: `${level}mA校准占位`, icon: 'none' });
    },
  },
};
</script>

<style lang="scss" scoped>
page { height: 100%; }
.container { height: 100%; background: #f6f7fb; padding: 16rpx 30rpx 30rpx; }
.tips-card { background: #ffffff; border-radius: 12rpx; padding: 16rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04); }
.tip { display: block; color: #5f6169; font-size: 22rpx; line-height: 1.6; }
.ai-card { background: #ffffff; border-radius: 12rpx; padding: 16rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04); margin-top: 16rpx; }
.card-header { display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: 28rpx; color: #1e1f23; }
.summary { display: flex; align-items: center; gap: 8rpx; }
.summary-text { font-size: 22rpx; color: #8b8d93; }
.row { display: flex; align-items: center; justify-content: space-between; padding: 12rpx 0; }
.row-left { display: flex; align-items: center; gap: 8rpx; }
.row-title { font-size: 26rpx; color: #1e1f23; }
.row-right { display: flex; align-items: center; gap: 12rpx; }
.row-value { font-size: 24rpx; color: #1e1f23; }
.row-edit { width: 60rpx; height: 64rpx; display: flex; align-items: center; justify-content: center; border: 1rpx solid #e6e8f0; border-radius: 8rpx; }
.section { margin: 4rpx 0 8rpx; }
.params { display: flex; align-items: center; gap: 8rpx; margin: 8rpx 0 12rpx; }
.param-title { font-size: 24rpx; color: #5f6169; }
.param-value { font-size: 24rpx; color: #1e1f23; }
.btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12rpx; }
.popup { width: 540rpx; background: #ffffff; padding: 16rpx; border-radius: 12rpx; }
.popup-title { font-size: 28rpx; color: #1e1f23; margin-bottom: 10rpx; }
.popup-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12rpx; margin-top: 16rpx; }
</style>